<template>
  <div>
    <div
      style="margin: 5px 0; display: flex; justify-content: space-between"
      v-if="showSearch"
    >
      <div style="display: flex; align-items: center">
        <el-input
          v-model="strfilter"
          placeholder="请输入品名"
          style="width: 200px"
          class="filter-item"
          size="small"
          clearable
          @keyup.enter.native="search(strfilter)"
        />
        <el-button
          class="filter-item"
          type="primary"
          size="small"
          @click="search(strfilter)"
        >
          查询
        </el-button>
        <slot name="btnLeft" />
      </div>
      <div style="display: flex; align-items: center">
        <div style="margin-right: 10px">
          <el-select
            v-model="queryParams.repositoryName"
            placeholder="选择仓库"
            clearable
            style="width: 180px"
            size="small"
            @change="search(strfilter)"
          >
            <el-option
              v-for="item in warehouseList"
              :key="item.value"
              :label="item.warehouseName"
              :value="item.warehouseName"
            />
          </el-select>
        </div>
        <el-button-group>
          <el-button
            :type="!queryParams.accurate ? 'primary' : 'default'"
            @click="queryParams.accurate = false"
            size="small"
            >模糊</el-button
          >
          <el-button
            :type="queryParams.accurate ? 'primary' : 'default'"
            @click="queryParams.accurate = true"
            size="small"
            >精确</el-button
          >
        </el-button-group>
      </div>
    </div>
    <div>
      <el-table
        ref="selectVal"
        :data="list"
        border
        fit
        :height="tableHeight"
        highlight-current-row
        style="overflow: auto"
        @row-click="rowClick"
        :row-class-name="rowIndex"
        :size="tableSize"
        :cell-style="{ 'font-size': '15px' }"
      >
        <template slot="empty">
          <el-empty description="暂无库存" :image-size="120"></el-empty>
        </template>
        <!-- ---复选列--- -->
        <el-table-column v-if="multi == 1" type="selection" width="40" />
        <!-- ---单选列--- -->

        <el-table-column v-else label="" width="40" show-overflow-tooltip>
          <template slot-scope="scope">
            <el-radio
              v-model="radio"
              :label="scope.$index"
              @change.native="getCurrentRow(scope.row)"
            >
              {{ " " }}</el-radio
            >
          </template>
        </el-table-column>
        <el-table-column label="产品类型" align="center" prop="ctype">
          <template slot-scope="scope">
            <span v-if="scope.row.ctype == 2">窗帘</span>
            <span v-if="scope.row.ctype == 1">墙布</span>
          </template>
        </el-table-column>
        <!-- <el-table-column label="到货单号" align="center" prop="arrivalnumber" /> -->
        <!-- <el-table-column label="到货日期" align="center" prop="Arrivaldate" /> -->
        <el-table-column
          label="存货编码"
          align="center"
          prop="inventoryCode"
          width="120px"
        />
        <el-table-column label="存货名称" align="center" prop="frbaicName" />
        <el-table-column
          label="供应商型号"
          align="center"
          prop="specification"
        />
        <el-table-column label="门幅" align="center" prop="doorwidth" />
        <el-table-column
          label="状态"
          align="center"
          prop="status"
          width="80px"
          show-overflow-tooltip
        />
        <el-table-column
          label="防水"
          align="center"
          prop="iswaterproof"
          width="100px"
          show-overflow-tooltip
        />
        <el-table-column
          label="批号"
          align="center"
          prop="batchNumber"
          width="120px"
          show-overflow-tooltip
        />
        <el-table-column
          label="现存数量"
          align="center"
          prop="inventoryQuantity"
        />
        <el-table-column
          v-if="!hideColumn.includes('freezenum')"
          label="计划用量"
          align="center"
          prop="freezenum"
        />
        <el-table-column
          label="可用数量"
          align="center"
          prop="availableQuantity"
        />
		
		<el-table-column label="领用数量" prop="usenum">
		  <template slot-scope="scope">
		    <el-form-item
		      :prop="'usenum.' + scope.$index + '.usenum'"
		    >
		      <el-input v-model="scope.row.usenum"></el-input>
		    </el-form-item>
		  </template>
		</el-table-column>

        <el-table-column
          label="仓库名称"
          align="center"
          prop="repositoryName"
        />
		<el-table-column
		  label="左空"
		  align="center"
		  prop="leftempty"
		/>
		<el-table-column
		  label="右空"
		  align="center"
		  prop="rightempty"
		/>
		<el-table-column
		  label="花到花"
		  align="center"
		  prop="flowertoflower"
		/>
        <el-table-column
          label="备注"
          align="center"
          min-width="100"
          show-overflow-tooltip
        >
          <template slot-scope="scope">
            <!-- <span>{{ scope.row.notes }}</span> -->
			<span>{{ scope.row.notespc }}</span>
			
          </template>
        </el-table-column>
      </el-table>
    </div>
    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList()"
    />
  </div>
</template>

<script>
import { listInventory } from "@/api/material/inventory";
import { listWarehouse } from "@/api/mes/wm/warehouse";
export default {
  components: {},
  props: {
    //  ["multi", "searchVal","showSearch"]
    showSearch: {
      type: Boolean,
      default: true,
    },
    showWareHouse: {
      type: Boolean,
      default: true,
    },
    // accurate: {
    //   type: Boolean,
    //   default: false,
    // },
    searchVal: {
      type: String,
      default: "",
    },
    repositoryName: {
      type: String,
      default: "",
    },
    tableHeight: {
      type: String,
      default: "50vh",
    },
    tableSize: {
      type: String,
      default: "medium",
    },
    multi: {
      type: Number,
      default: 1,
    },
    bgColor: {
      type: [String, Number],
      default: "",
    },
    hideColumn: {
      type: Array,
      default() {
        return [];
      },
    },
  },
  data() {
    return {
      title: "库存信息",
      list: [], //  列表数据
      strfilter: !!this.searchVal ? this.searchVal : "", // 搜索框内输入的值
      total: 0,
      radio: "", // 单选用参数默认为0即可
      selrows: "", // 选择的内容 单选变量
      queryParams: {
        pageNum: 1,
        pageSize: 100,
        accurate: true,
        repositoryName: !!this.repositoryName ? this.repositoryName : null,
        inventoryCode: null,
        frbaicName: null,
        specification: null,
        unit: null,
        batchNumber: null,
        inventoryQuantity: null,
        availableQuantity: null,
        isEmpty: "0",
      },
      warehouseList: [],
    };
  },
  created() {},
  mounted() {
    this.getWareHouse();
  },
  methods: {
    //  单选列方法
    getCurrentRow(row) {
      this.$forceUpdate();
      this.selrows = row;
      this.$emit("selRowVal", row);
    },
    // 加载列表
    getList() {
      if (!!this.searchVal) {
        this.queryParams.frbaicName = this.searchVal;
      }
      if (!!this.repositoryName) {
        this.queryParams.repositoryName = this.repositoryName;
      }
      const queryParams = {
        ...this.queryParams,
      };
      listInventory(queryParams).then((res) => {
        this.list = res.rows;
        this.total = res.total;
        this.loading = false;
      });
    },
    getWareHouse() {
      var queryParams = {
        pageNum: 1,
        pageSize: 1000,
      };
      listWarehouse(queryParams).then((res) => {
        this.warehouseList = res.rows;
      });
    },
    // 查询
    search(res) {
      this.queryParams.frbaicName = res;
      this.queryParams.pageNum = 1;
      const queryParams = {
        ...this.queryParams,
      };
      listInventory(queryParams).then((res) => {
        this.list = res.rows;
        this.total = res.total;
        this.loading = false;
      });
    },
    rowIndex({ row, rowIndex }) {
      row.row_index = rowIndex;
      if (this.bgColor == row.batchNumber) {
        return "success-row";
      }
    },
    rowClick(row) {
      this.radio = row.row_index;
      this.getCurrentRow(row);
    },
  },
};
</script>
<style lang="scss" scoped>
.current-row {
  background: blue;
}
::v-deep .el-table .success-row {
  background: #d4d8f7;
}
::v-deep .pagination-container {
  margin-top: 0px !important;
}
</style>
